<style scoped>

  .pre_zjcl_box,
  .pre_zjcl_box * {
    box-sizing: border-box;
    font-size: 0;
    margin: 0;
    padding: 0;
  }

  .pre_zjcl_box {
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /*background: rgba(212, 212, 212, 0.41);*/
    z-index: 999;
  }

  .inlineClass {
    position: static !important;
    background: transparent !important;
  }

  .pre_zjcl_box .innerBox {
    width: 100%;
    height: 100%;
    position: relative !important;
    overflow: hidden;
    border: 1px solid #777777;
  }

  .inlineClass .innerBox {
    border: none !important;
  }

  .pre_zjcl_tittle {
    background: #157ac1;
    height: 40px;
    padding-left: 14px;
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
  }

  .pre_zjcl_tittle span {
    line-height: 40px;
    font-size: 16px;
    color: white;
  }

  .pre_zjcl_tittle img {
    position: static !important;
    transform: translate(-10px, 0) !important;
    height: 100% !important;
    padding: 8px !important;
  }

  ._center {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .pre_zjcl_box .pre_zjcl_close {
    background-image: url("~@/assets/img/window_control/close.png");
    background-position: center center;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 1;
  }

  .pre_zjcl_box audio::-internal-media-controls-download-button,
  .pre_zjcl_box video::-internal-media-controls-download-button {
    display: none;
  }

  .pre_zjcl_box audio::-webkit-media-controls-enclosure,
  .pre_zjcl_box video::-webkit-media-controls-enclosure {
    overflow: hidden;
  }

  .pre_zjcl_box audio::-webkit-media-controls-panel,
  .pre_zjcl_box video::-webkit-media-controls-panel {
    /*width: calc(100% + 30px);*/
  }

  .pre_zjcl_container {
    height: calc(100% - 40px);
    width: 100%;
    position: absolute;
    top: 40px;
  }

  .inlineClass .pre_zjcl_container {
    position: static !important;
    height: 100% !important;
  }

  .pre_zjcl_box video {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .pre_zjcl_box img {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .pre_zjcl_box .audio {
    width: 100%;
    height: 100%;
    background: url("~@/assets/img/SlideEditor/audio_bg.jpg");
  }

  .pre_zjcl_box .inlineClass .audio {
    width: 300px;
    height: 200px;
  }

  .pre_zjcl_box .audio .music {
    height: calc(100% - 32px);
    width: 100%;
    background: url("~@/assets/img/SlideEditor/music.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .pre_zjcl_box audio {
    height: 32px;
    width: 100%;
  }
</style>

<template>
  <div class="pre_zjcl_box"
       :id="id"
       v-if="inline||src"
       :class="{inlineClass:inline}">
    <!--@mousedown.self="hide"-->
    <!--@mousemove="mousemove" @mouseup="stopMove" @mouseout="stopMove"-->
    <div v-if="src" class="innerBox" ondragstart="return false">
      <!--ref="moveDiv" @mousedown.stop="mousedown"-->
      <!--<div class="pre_zjcl_main" ondragstart="return false">-->
      <div class="pre_zjcl_tittle" v-if="!inline" ondragstart="return false" @mousedown.self="bindMove">
        <img src="~@/assets/img/icon.png">
        <span>
          {{srcType==='image'?'图片预览':''}}
          {{srcType==='video'?'视频预览':''}}
          {{srcType==='audio'?'音频预览':''}}
          {{srcType==='pdf'?'文档预览':''}}
        </span>
        <div class="pre_zjcl_close" title="关闭" @click.stop="hide" v-show="showCloseBtn"></div>
      </div>
      <div class="pre_zjcl_container">
        <img v-if="srcType==='image'" :src="src"><!--@wheel="zoom"-->

        <div class="audio _center" v-if="srcType==='audio'">
          <div class="music"></div>
          <audio autoplay controls :src="src"></audio>
        </div>

        <video v-if="srcType==='video'" autoplay controls :src="src" @dblclick="toggleFullScreen"></video>

        <c-pdf v-if="srcType==='pdf'" @pdf_callback="$emit('pdf_callback',$event)" :config="config" ref="pdfjs"
               :style="inline?'height: calc(100% - 10px);':''"></c-pdf>

        <!--<pdf v-if="srcType==='pdf'" @pdf_callback="$emit('pdf_callback',$event)" :config="config" ref="pdfjs"-->
        <!--:style="inline?'height: calc(100% - 10px);':''"></pdf>-->
      </div>

      <!--</div>-->
    </div>
  </div>
</template>

<script>
  const path = require('path')

  const { util: { getRandomId, getPos } } = require('../util')

  const {
    quantity: { base64RE, extStrRE, typeStrRE }
  } = require('../util')

  export default {
    name: 'PreZjcl',
    data () {
      return {
        src: '', // 文件的base64编码
        // fileExt: '',//文件类型 image/audio/video
        defaultScale: 1,
        srcType: '',
        id: getRandomId(),
        resize: false
      }
    },
    methods: {
      zoom (ev) {
        if (ev.wheelDeltaY > 0) {
          ev.target.style.height = ev.target.offsetHeight + 20 + 'px'
          // this.defaultScale += 0.1;
        } else {
          ev.target.style.height = ev.target.offsetHeight - 20 + 'px'
          // this.defaultScale -= 0.1;
        }
        // ev.target.style.transformOrigin = `${ev.offsetX}px ${ev.offsetY}px`;
        // setTimeout(() => {
        // ev.target.style.transform = `scale(${this.defaultScale})`;
        // }, 0);
      },
      toggleFullScreen (ev) {
        if (ev.target.webkitSupportsFullscreen) {
          if (!ev.target.webkitDisplayingFullscreen) {
            ev.target.webkitRequestFullScreen()
          } else {
            ev.target.webkitExitFullscreen()
          }
        }
      },
      bindMove (ev) {
        window.getSelection().removeAllRanges()

        let outerBox = document.querySelector(`#${this.id}`)
        let innerBox = outerBox.querySelector(`.innerBox`)

        let mp = { x: ev.clientX, y: ev.clientY }
        let pos = getPos(innerBox)

        if (mp.y - pos.y <= 5) return

        let mark = document.createElement('div')
        // mark.style.position = 'absolute';
        mark.style.position = 'fixed'
        mark.style.top = '0'
        mark.style.bottom = '0'
        mark.style.left = '0'
        mark.style.right = '0'
        mark.style.cursor = ''
        mark.style.background = '#ccc'
        mark.style.opacity = '0'
        mark.style.zIndex = '99999999'

        outerBox.appendChild(mark)

        mark.addEventListener('mousemove', _ev => {
          if (this.resize) return
          let deltaX = _ev.clientX - mp.x
          let deltaY = _ev.clientY - mp.y

          innerBox.style.left = pos.x + deltaX + 'px'
          let y = pos.y - 34 + deltaY
          if (y < 0) y = 0
          innerBox.style.top = y + 'px'
        })
        mark.addEventListener('mouseup', ev => {
          mark.parentElement.removeChild(mark)
        })
        mark.addEventListener('mouseout', ev => {
          mark.parentElement.removeChild(mark)
        })
      },
      bindResize () {
        let outerBox = document.querySelector(`#${this.id}`)
        let innerBox = outerBox.querySelector(`.innerBox`)
        let pos = getPos(innerBox)
        // pos.x -= innerBox.offsetWidth / 2;

        innerBox.addEventListener('mousemove', ev => {
          if (!this.resize) pos = getPos(innerBox)

          let isLeft = ev.pageX >= pos.x && ev.pageX <= pos.x + 5 &&
          ev.pageY >= pos.y && ev.pageY <= pos.y + innerBox.offsetHeight
          let isRight = ev.pageX >= pos.x + innerBox.offsetWidth - 5 && ev.pageX <= pos.x + innerBox.offsetWidth &&
          ev.pageY >= pos.y && ev.pageY <= pos.y + innerBox.offsetHeight

          let isTop = ev.pageY >= pos.y && ev.pageY <= pos.y + 5 &&
          ev.pageX >= pos.x && ev.pageX <= pos.x + innerBox.offsetWidth
          let isBottom = ev.pageY >= pos.y + innerBox.offsetHeight - 5 && ev.pageY <= pos.y + innerBox.offsetHeight &&
          ev.pageX >= pos.x && ev.pageX <= pos.x + innerBox.offsetWidth

          if (isLeft || isRight) {
            // outerBox.style.cursor = 'w-resize';
            innerBox.style.cursor = 'w-resize'
          } else if (isTop || isBottom) {
            // outerBox.style.cursor = 'n-resize';
            innerBox.style.cursor = 'n-resize'
          } else {
            // outerBox.style.cursor = 'default';
            innerBox.style.cursor = 'default'
          }
        })
        innerBox.addEventListener('mousedown', ev => {
          let isLeft = ev.pageX >= pos.x && ev.pageX <= pos.x + 5 &&
          ev.pageY >= pos.y && ev.pageY <= pos.y + innerBox.offsetHeight
          let isRight = ev.pageX >= pos.x + innerBox.offsetWidth - 5 && ev.pageX <= pos.x + innerBox.offsetWidth &&
          ev.pageY >= pos.y && ev.pageY <= pos.y + innerBox.offsetHeight

          let isTop = ev.pageY >= pos.y && ev.pageY <= pos.y + 5 &&
          ev.pageX >= pos.x && ev.pageX <= pos.x + innerBox.offsetWidth
          let isBottom = ev.pageY >= pos.y + innerBox.offsetHeight - 5 && ev.pageY <= pos.y + innerBox.offsetHeight &&
          ev.pageX >= pos.x && ev.pageX <= pos.x + innerBox.offsetWidth

          if (!(isLeft || isRight || isTop || isBottom)) return

          let mp = { x: ev.pageX, y: ev.pageY }
          // mp.y += 74;

          this.resize = true

          let mark = document.createElement('div')
          mark.style.position = 'absolute'
          mark.style.top = '0'
          mark.style.bottom = '0'
          mark.style.left = '0'
          mark.style.right = '0'
          mark.style.cursor = innerBox.style.cursor
          mark.style.background = '#ccc'
          mark.style.opacity = '0'
          mark.style.zIndex = '99999999'

          outerBox.appendChild(mark)

          let size = {
            width: innerBox.offsetWidth,
            height: innerBox.offsetHeight
          }

          mark.addEventListener('mousemove', ev => {
            let deltaX = ev.pageX - mp.x
            let deltaY = ev.pageY - mp.y

            if (isLeft) {
              innerBox.style.width = size.width - deltaX + 'px'
              innerBox.style.left = pos.x + deltaX + 'px'
            } else if (isRight) {
              innerBox.style.width = size.width + deltaX + 'px'
            } else if (isTop) {
              innerBox.style.height = size.height - deltaY + 'px'
              innerBox.style.top = pos.y + deltaY - 34 + 'px'
            } else if (isBottom) {
              innerBox.style.height = size.height + deltaY + 'px'
            }
          })
          mark.addEventListener('mouseup', ev => {
            this.resize = false
            mark.parentElement.removeChild(mark)
          })
          mark.addEventListener('mouseout', ev => {
            this.resize = false
            mark.parentElement.removeChild(mark)
          })
        })
      },
      initPos () {
        let outerBox = document.querySelector(`#${this.id}`)
        let innerBox = outerBox.querySelector(`.innerBox`)

        let width = outerBox.offsetWidth * 0.75
        let height = outerBox.offsetHeight * 0.75

        if (this.srcType === 'audio') {
          width = 400
          height = 250
        }
        /* else if (this.srcType === 'pdf') {
                 width = 630;
                 height = 750;
               } */

        // 250/400

        innerBox.style.width = width + 'px'
        innerBox.style.height = height + 'px'

        innerBox.style.left = (outerBox.offsetWidth - width) / 2 + 'px'
        innerBox.style.top = (outerBox.offsetHeight - height) / 2 + 'px'

        innerBox.style.background = 'white'
      },
      show (url) {
        if (this.src === url) return
        this.src = url

        if (base64RE.test(this.src)) {
          this.srcType = this.src.match(base64RE)[2]
        } else {
          this.srcType = path.parse(this.src).ext
        }

        for (let type in extStrRE) {
          if (extStrRE[type].test(this.srcType)) {
            this.srcType = type
            break
          }
        }

        this.$nextTick(async () => {
          if (!this.inline) {
            this.initPos()
            this.bindResize()
          }

          if (this.srcType === 'pdf') {
            console.log('====================pdf==========================')
            await this.$refs.pdfjs.open(this.src)
          }
        })
      },
      hide () {
        if (this.inline) return
        this.src = ''
        this.$emit('hide')
      },
      getType (filePath) {
        for (let type in typeStrRE) {
          for (let ext in typeStrRE[type]) {
            if (typeStrRE[type][ext].test(path.parse(filePath).ext)) {
              return `${type}/${ext}`
            }
          }
        }
      }
    },
    props: {
      showCloseBtn: {
        type: Boolean,
        default: true
      },
      inline: {
        type: Boolean,
        default: true
      },
      config: {
        type: Object,
        default: () => {
          return {}
        }
      }
    }
  }
</script>
